﻿@model IEnumerable<lookback.ViewModels.LocationViewModel>

@{
  ViewBag.Title = "我曾经的足迹";
}

<link type="text/css" rel="stylesheet" href="~/Content/css/map.css" />

<script src="http://webapi.amap.com/maps?v=1.3&key='your-amap-key'" type="text/javascript"></script>
<script src="~/Scripts/map.js" type="text/javascript"></script>

<div class="col-lg-10">
  <div class="panel panel-default map-panel">
    <div class="panel-body">
      <div id="map-container" style="height: 520px; width: 780px;"></div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var mapTop = $('.map-panel').offset().top;
  $(document).scroll(function(){
    var docTop = $(document).scrollTop();
    if (mapTop < docTop) {
      $('.map-panel').addClass('fixed');
    }else {
      $('.map-panel').removeClass('fixed');
    }
  });
</script>

<div class="col-lg-2">
  <div class="list-group">
    @{int cnt = 0;}
    @foreach (var m in Model)
    {
      <a href="javascript:void(0)" class="list-group-item" data-id=@cnt>
        <h6 class="list-group-item-heading">@m.Title</h6>
        <p class="list-group-item-text">@m.CreateDate</p>
      </a>
      cnt++;
    }
  </div>
</div>

<div class="modal fade" id="picShowModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
  $(function () {

    var mapObj, markers = [], infoWindows = [];

    // 初始化地图对象
    mapObj = initMap();

    // 设置地图鼠标样式
    setMapMouseStyle(mapObj);

    @foreach (var m in Model)
    {
      @:markers.push(addMarker("@m.Lon", "@m.Lat", mapObj));
      @:var thumbnail = "@m.Thumbnail";
      @:infoWindows.push(addInfoWindow(mapObj, @m.Id, "@m.Title", "@m.Text", thumbnail, "@m.CreateDate"));
    }

    // 设置地图标记，点击标记弹出信息窗口
    $.each(markers, function(i, marker){
      marker.setMap(mapObj);
      AMap.event.addListener(marker, "click", function(e){
        infoWindows[i].open(mapObj, marker.getPosition());
      });
    });

    // 点击右侧导航，强调对应的地图标记并打开其信息窗口
    $('a.list-group-item').click(function(){
      $('a.list-group-item').removeClass('focused');
      $(this).addClass('focused');
      var marker = markers[$(this).data('id')];
      marker.setAnimation('AMAP_ANIMATION_DROP');
      infoWindows[$(this).data('id')].open(mapObj, marker.getPosition());
    });
  });

  // 点击详情按钮，弹出该微博的图片浏览窗口
  $(document).on('click', 'a.more-pics', function (e) {
    var carousel = "<div id='carousel-example-generic' class='carousel slide' data-ride='carousel'></div>";
    $('.modal-content').append(carousel);

    var wrapper = "<div class='carousel-inner' role='listbox'></div>";
    $('.carousel').append(wrapper);

    var id = $(e.target).data('id');
    $.get("/Weibo/GetStatusImages", "statusId=" + id.toString(), function(response){
      $.each(response, function(index, value){
        var slide;
        if (index == 0) {
          slide = "<div class='item active'><img src=" + value + ' /></div>';
        }else {
          slide = "<div class='item'><img src=" + value + ' /></div>';
        }
        $('.carousel-inner').append(slide);
      });
    });

    var controls = "<a class='left carousel-control' href='#carousel-example-generic' role='button' data-slide='prev'>" +
                      "<span class='glyphicon glyphicon-chevron-left'></span>" +
                      "<span class='sr-only'>Previous</span>" +
                   "</a>" +
                   "<a class='right carousel-control' href='#carousel-example-generic' role='button' data-slide='next'>" +
                      "<span class='glyphicon glyphicon-chevron-right'></span>" +
                      "<span class='sr-only'>Next</span>" +
                   "</a>";
    $('.carousel').append(controls);
    $('#picShowModal').modal();
  });

  // 模态框隐藏后，清空模态框中的内容
  $('#picShowModal').on('hidden.bs.modal', function(e){
    $('.modal-content').empty();
  });
</script>
